<!-- 选项卡切换组件  -->
<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="课程章节" name="first" v-if="showchapter">
        <div class="detail-container">
          <div class="borders">{{classinfo.introduction}}</div>
          <div class="borders" v-for="(item,i) of classinfo.content" :key="i">
            <!-- <div class="section">
              <h3>{{item.id}}{{item.section}}</h3>
            </div> -->
            <div class="chapters" @click="goLearning(item.chaptersNo)">
              <span>{{item.cid}}、</span>
              <span>{{item.chaptersName}}</span>
              <span class="laststudy" :style="{display:laststudy==item.chaptersNo? 'inline':'none'}">上次学到</span>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="问答" name="second">
        <div class="btn" v-if="!showchapter" @click="torelease('que')">我要发布</div>
        <question :questiontype="qtype" :content="queContent"></question>
      </el-tab-pane>
      <el-tab-pane label="评论" name="third">
        <div class="btn" v-if="!showchapter" @click="torelease('mes')">我要发布</div>
        <question :questiontype="!qtype" :content="comContent"></question>
      </el-tab-pane>
    </el-tabs>
    <inputpage v-if="showinput" @closeinput="closeinput" @release="release" :source="source"></inputpage>
  </div>
</template>

<script>
import inputpage from '@/components/inputpage.vue'
import question from '@/pages/question/question'
import axios from 'axios'
import {mapState} from 'vuex'

export default {
  name: 'threetab',
  data () {
    return {
      showinput: false,
      activeName: '', // tab下划线
      qtype: true, // 提问还是评论
      queContent: null, // 问题
      comContent: null, // 评论
      source: ''
    }
  },
  props: ['classinfo', 'showchapter', 'laststudy','ispay'],
  components: {
    question,
    inputpage
  },
  computed:{
    ...mapState({
      memberNo: 'memberNo',
      current: 'current'
    }),
  },
  inject: ['reload'],
  methods: {
    handleClick (tab, event) {
      switch (event.target.id) {
        case 'tab-second':
          console.log('CLICK QUESTION')
          this.getqueContent ()
          break
        case 'tab-third':
          console.log('CLICK COMMENTS')
          this.getcomContent()
          break
        default: break
      }
    },
    goLearning (chapterNo) {
      if (this.isPay || !this.classinfo.getting) {
        let cid = chapterNo
        let routeData = this.$router.resolve({
          path: '/learning',
          query: { 
            classNo: this.$route.query.classNo,
            chapterId: cid 
          },
        });
        window.open(routeData.href, '_blank');
      } else {
        this.$message({
          type: 'info',
          message: '请先购买再食用课程噢'
        }) 
      }
      
    },
    torelease (point) {
      if(this.memberNo && this.current === '1') {
        this.showinput = true
        if(point === 'que'){
          this.source = {
            type: 2
          }
        } else if(point === 'mes'){
          this.source = {
            type: 4
          }
        }
        console.log(this.source)
      } else if (this.current !== '1') {
        this.$message({
          type: 'info',
          message: '老师，职员，管理员暂无权限'
        })
      } else {
        alert('请先登录')
      }
    },
    closeinput () {
      console.log('接收关闭事件')
      this.showinput = false
    },
    release () {
      this.closeinput ()
      this.reload()
    },
    // 获得问题
    getqueContent () {
      if (!this.queContent) {
        let path = ''
        if(!this.showchapter) {
          // 按照章节号获得问题
          let chapterId = this.$route.query.chapterId
          path = this.ports.qandA.getquestion + '?chapterNo=' + chapterId
        } else if(this.showchapter) {
          // 按照课程号获得问题
          let classId = this.$route.query.classNo
          path = this.ports.qandA.qandA + '?classNo=' + classId
        }
        axios.get(path)
          .then(this.getqueContentSucc)
      }
    },
    getqueContentSucc (result) {
      if(result.data.code === 200 && result.data.msg) {
        this.queContent = this.common.handleDate(result.data.msg)
      }
    },
    // 获得评论
    getcomContent () {
      if (!this.comContent) {
        if(this.showchapter) {
          let classId = this.$route.query.classNo
          // 按照课程号获得评论
          axios.get(this.ports.reply.getComment + '?classNo=' + classId)
            .then(this.getcomContentSucc)
        } else {
          let chapterId = this.$route.query.chapterId
          // 按照章节号获得评论
          axios.get(this.ports.reply.getCommentByChapterNo + '?chapterNo=' + chapterId)
            .then(this.getcomContentSucc)
        }
      }
    },
    getcomContentSucc (result) {
      if(result.data.code === 200 && result.data.msg) {
        this.comContent = this.common.handleDate(result.data.msg)
      }
    }
  },
  mounted () {
    this.activeName = this.showchapter ? 'first' : 'second'
    //如果是学习页面的问答,需要默认打开问题面板
    if(!this.showchapter) {
      this.getqueContent ('qandA')
    }
  }
}
</script>
<style scoped>
.detail-container {
  padding: 10px;
}
.section {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  margin-bottom: 0.25rem;
}
.chapters {
  height: 40px;
  line-height: 40px;
  text-decoration: none;
  color: black;
  border-radius: 6px;
  padding: 0 10px;
  cursor: pointer;
}
.chapters:hover {
  color: #f20d0d;
  background-color: rgba(242, 13, 13, 0.1);
  font-weight: 700;
}
.laststudy{
  border-radius: 4px;
  background-color: rgba(242, 13, 13, 0.7);
  color: #fff;
  margin-left: 400px;
  padding: 0 10px;
}
</style>
